<!-- 管理员设置学期信息  -->
<template>
  <div class="wrapper-container"
       style="width:100%">
    <div class="table-container">
      <el-table :data="tableData"
        max-height="650"
                class="xpaas-table-class"
                row-class-name="xpaas-row-class"
                cell-class-name="xpaas-cell-class"
                header-row-class-name="xpaas-header-row-class"
                header-cell-class-name="xpaas-header-cell-class">
        <el-table-column prop="kebh"
                         width="300"
                         align="center">
          <template slot-scope="scope"
                    slot="header">
            <div>专业名称</div>
            <div>【培养层次】</div>
          </template>
          <!-- <template slot-scope="scope">
            <div style="display: flex; width: 150px; margin: 0 auto">
              <div>{{ scope.row.name }}</div>
              <div style="margin-left: 50px">{{ scope.row.trainingLevel }}</div>
            </div>
          </template> -->
          <template slot-scope="scope">
            {{ scope.row.name }}【{{ scope.row.trainingLevel }}】
            <!-- <span style="width: 60px; display: block"></span> -->
          </template>
        </el-table-column>
        <el-table-column width="600"
                         prop="zsbx"
                         label="招生部系"
                         align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.zsbx"
                       placeholder="请选择">
              <el-option v-for="item in zsxbList"
                         :key="item.value"
                         :label="item.deptName"
                         :value="item.deptName">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="rxxueqi"
                         label="入学学期"
                         align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.rxxueqi"
                       placeholder="请选择"
                       clearable
                       @change="selXueq(scope.row)">
              <el-option v-for="(item,index) in rxsjList"
                         :key="index"
                         :label="item.xqmc"
                         :value="item.xqmc">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="byxueqi"
                         label="毕业学期"
                         align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.byxueqi"
                       placeholder="请选择"
                       clearable
                       @change="selXueq(scope.row)">
              <el-option v-for="(item,index) in rxsjList"
                         :key="index"
                         :label="item.xqmc"
                         :value="item.xqmc">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-block"
           style="margin-top: 20px">
        <span class="export-button">
          <img src="../../../assets/assessment/icon-export.png" alt="" />
          <download-excel
            class="export-btn"
            :data="tableData"
            :fields="jsonFields"
            type="xls"
            name="学期信息.xls"
            style="color: #f3b815"
          >
            &ensp;导出Excel
          </download-excel>
        </span>
          <!-- <img src="../../../assets/assessment/icon-export.png" alt="" /> -->
          <!-- <download-excel class="export-btn"
                          :data="tableData"
                          :fields="jsonFields"
                          type="xls"
                          name="学期信息.xls"
                          style="color: #fff">
            <el-button icon="el-icon-download"
                       type="warning">导出Excel</el-button>
          </download-excel> -->
      </div>
    </div>

    <div class="search-container" style="display: flex; justify-content: center !important">
      <div class="button-group">
        <div @click="updateele1()">
          <div>完 成</div>
        </div>
        <div @click="updateele2()">
          <div>取 消</div>
        </div>
      </div>
      <!-- <el-button type="success"
                 @click="updateele1()">完 成</el-button>
      <span style="display:inline-block;width:60px;"></span>
      <el-button type="danger"
                 @click="updateele2()">取 消</el-button> -->
    </div>
  </div>
</template>

<script>
import SelectItem from '../../../components/SelectItem.vue'
import InputItem from '../../../components/InputItem.vue'
import ButtonItem from '../../../components/ButtonItem.vue'
import { wc } from '@/api/professional/details'
import { reqGetXqList, reqXydList } from '@/api/admin1/check.js'

export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      zsxb1: '',
      byxueqi: '',
      rxxueqi: '',
      zsbx: '',
      bytime:'',
      rxtime:'',
      tableData: [
        {
          kcbh: '',
          pycc: '',
          zsxb: '',
          rxsj: '',
          bysj: '',
        },
      ],
      zsxbList: [],
      rxsjList: [],
      nd: '',
      bysjList: [],
      jsonFields: {
        专业名称: 'name',
        培养层次: 'trainingLevel',
        招生部系: 'zsbx',
        入学学期: 'rxxueqi',
        毕业学期: 'byxueqi',
      },
    }
  },

  mounted() {
    this.reqGetXqList()
  },
  created() {
    this.getlist()
    this.zsxbselset()
  },
  methods: {
    selXueq(rows){
      const rxtimeInfo = this.rxsjList.find((item) => {
        return item.xqmc === rows.rxxueqi;
      })
      const bytimeInfo = this.rxsjList.find((item) => {
        return item.xqmc === rows.byxueqi;
      })
      rows.rxtime = rxtimeInfo.xqksrq;
      rows.bytime = bytimeInfo.xqjsrq;
    },
    zsxbselset() {
      reqXydList().then((res) => {
        this.zsxbList = res.data.data
      })
    },
    reqGetXqList() {
      reqGetXqList().then((res) => {
        this.rxsjList = res.data.data
      })
    },
    getlist() {
      if (this.$route.query.tablelist != undefined) {
        //    localStorage.setItem('tableData', this.$route.query.tablelist)
        localStorage.setItem(
          'tableData',
          JSON.stringify(this.$route.query.tablelist)
        )
        localStorage.setItem('nd', this.$route.query.nd)
      }
      this.tableData = JSON.parse(localStorage.getItem('tableData'))
      this.nd = localStorage.getItem('nd')
      // this.tableData = this.$route.query.tablelist;
      // console.log(this.tableData)
      // this.nd = this.$route.query.nd;
    },
    updateele1() {
      let arr = []
      for (let i = 0; i < this.tableData.length; i++) {
        let obj = {
          specialtyId: this.tableData[i].id,
          trainingLevel: this.tableData[i].trainingleveid,
          trainingLevelname: this.tableData[i].trainingLevel,
          specialtyName: this.tableData[i].name,
          zsbx: this.tableData[i].zsbx,
          rxxueqi: this.tableData[i].rxxueqi,
          byxueqi: this.tableData[i].byxueqi,
          rxtime: this.tableData[i].rxtime,
          bytime: this.tableData[i].bytime,
          year: this.nd,
        }
        arr.push(obj)
      }
      return new Promise(() => {
        wc(arr).then((res) => {
          this.$router.push({
            path: '/admin/professional/inquire',
            //要跳转的页面的路由
            query: {
              year: this.nd,
            },
          })
        })
      })
    },
    updateele2() {
      this.$router.push('/admin/professional/enrollment')
    },
  },
}
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
}

.button-group {
  cursor: pointer;
  text-align: center;

  > div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
      margin-right: 139px;
    }

    &:nth-child(2) {
      color: #ff3819;
      border: 1px solid #ff3819;
      background: #ffefef;
    }
  }
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}
.export-button {
  background: #fff6ef;
  border: 1px solid #f3b815;
  width: 130px;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  box-sizing: border-box;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #f3b815;
  }
  > img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}

.table-container {
  margin-top: 0;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import '../../../styles/special.less';

/deep/.el-date-editor .el-input__prefix {
  right: 5%;
  top: 5%;
}
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}

.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid #02c86c;
  color: #02c86c;
  background-color: #dfffef;
}

.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid #02c86c;
  color: white;
  background-color: #02c86c;
}

.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}

.table-container {
  margin-top: 0;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@fontFamily: 'Microsoft YaHei';
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          > th.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
